<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .set_bg_con {
            width: 440px;
            height: 40px;
            border: 1px solid #ddd;
            margin: 40px auto 0;
            background-color: #fff
        }

        .set_text {
            line-height: 40px;
            float: left;
            margin: 0 20px 0 10px;
            color: #666;
        }

        .style01,
        .style02,
        .style03,
        .style04,
        .style05,
        .style06 {
            width: 30px;
            height: 26px;
            float: left;
            margin: 8px 5px;
            background: gold;
            cursor: pointer;
        }

        .style01 {
            background: #0181cc;
        }

        .style02 {
            background: #00b9f1;
        }

        .style03 {
            background: #ef8201;
        }

        .style04 {
            background: #8fc320;
        }

        .style05 {
            background: #e84191;
        }

        .style06 {
            background: #ee87b4;
        }
    </style>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/jquery.cookie.js"></script>
    <script type="text/javascript">
        // 点击色块改变网页的背景色，请写出对应的功能代码
        $(function () {
            // 获取对象
            var $oBody = $("body");
            var $oStyle = $(".set_bg_con div").not(":first");
            // alert($oStyle.length);
            $oBody.css({ backgroundColor: localStorage.getItem("backgroundColor") });
            $oStyle.each(function () {
                $(this).click(function () {
                    $oBody.css({ backgroundColor: $(this).css("backgroundColor") });
                    localStorage.setItem("backgroundColor", $(this).css("backgroundColor"), { expires: 10 });
                });
            });
            // 方式二
            // var $oStyle01 = $(".style01");
            // var $oStyle02 = $(".style02");
            // var $oStyle03 = $(".style03");
            // var $oStyle04 = $(".style04");
            // var $oStyle05 = $(".style05");
            // var $oStyle06 = $(".style06");

            // 添加点击事件
            // $oStyle01.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
            // $oStyle02.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
            // $oStyle03.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
            // $oStyle04.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
            // $oStyle05.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
            // $oStyle06.click(function () {
            //     $oBody.css({backgroundColor: $(this).css("backgroundColor")});
            //     $.cookie("backgroundColor", $(this).css("backgroundColor"), {expire: 10});
            // });
        });
    </script>
</head>

<body>
    <div class="set_bg_con">
        <div class="set_text">请选择网页的背景色：</div>
        <div class="style01"></div>
        <div class="style02"></div>
        <div class="style03"></div>
        <div class="style04"></div>
        <div class="style05"></div>
        <div class="style06"></div>
    </div>
</body>

</html>